import React, { useEffect, useState } from 'react'
import { useHistory } from 'dva'
import { Space, Table, Tag, Image, Button, Input, Modal, notification, Form } from 'antd';
import { Accesstothesong, Deletethelist, Songmanagements, Songlistmanagements, Addplaylist, Modifytheplaylist } from '../../api'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Route } from 'dva/router'
import ListSong from './ListSong';
import './song-management.scss'
export default function Songmanagement() {
    const { Search } = Input;
    const history = useHistory()
    const [Addthesongs] = Form.useForm()
    const [Editindividualplaylists] = Form.useForm()
    const [a] = Form.useForm()
    const { confirm } = Modal;
    const [manageplaylists, setManageplaylists] = useState([])
    const [deletes, setDeletes] = useState([])
    const [findlist, setFindlist] = useState([])
    ////////////添加歌单模块
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = async () => {
        const arr = Addthesongs.getFieldsValue(true)
        // console.log(arr)/
        let params = new URLSearchParams();
        params.append('title', arr.title);
        params.append('pic', 'https://img1.baidu.com/it/u=981613362,196999169&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200');
        params.append('introduction', arr.introduction);
        params.append('style', arr.style);
        const data = await Addplaylist(params);
        getsongadmin();
        setIsModalOpen(false);
        Addthesongs.resetFields()
    };
    const handleCancel = () => {
        setIsModalOpen(false);
        Addthesongs.resetFields()
    };

    //新增,点击事件
    const Thenewsonglist = (val) => {
        showModal()
    }
    ///////
    //编辑
    const Editbox = (val) => {
        Editindividualplaylists.setFieldsValue(val)
        setOpen(true);
    }
    const [open, setOpen] = useState(false);

    const Ok = async () => {
        const arr = Editindividualplaylists.getFieldsValue(true)
        let params = new URLSearchParams();
        params.append('id', arr.id);
        params.append('title', arr.title);
        params.append('introduction', arr.introduction);
        params.append('style', arr.style);
        const data = await Modifytheplaylist(params);
        getsongadmin();
        Editindividualplaylists.resetFields()
        setOpen(false);
    };
    const Cancel = () => {
        setOpen(false);
        Editindividualplaylists.resetFields()
    };
    ///
    useEffect(() => {
        getsongadmin()
    }, [])


    const getsongadmin = async () => {
        const data = await Accesstothesong()
        // console.log(data)
        data.forEach(item => {
            item.key = item.id
        })
        setManageplaylists(data)
        setFindlist(data)
    }
    const songlist = async (val) => {
        history.push(`/Lisysong?id=${val}`)
    }
    const columns = [
        {
            title: '歌单图片',
            dataIndex: 'pic',
            key: 'id',
            align: 'center',
            render: (item, text, index) => {
                return (
                    <div>
                        <Image
                            width={100}
                            height={100}
                            src={item}
                        />
                    </div>
                )
            },
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'id',
            align: 'center',
        },

        {
            title: '简介',
            dataIndex: 'introduction',
            key: 'id',
            align: 'center',
            render: (text, item) => (
                <div className="Introductiontothe">{text}</div>
            ),

        },
        {
            title: '风格',
            dataIndex: 'style',
            key: 'id',
            align: 'center',
        },
        {
            title: '歌曲管理',
            key: 'id',
            align: 'center',
            render: (item, text, index) => (
                <Button onClick={() => songlist(text.id)}>歌曲管理</Button>
            )
        },

        {
            title: '操作',
            key: 'id',
            align: 'center',
            render: (item, text, index) => {
                return <div className='dellist'><Button onClick={() => Editbox(item)}>编辑</Button>&nbsp;&nbsp;&nbsp;&nbsp;<Button onClick={() => dellist('success', item.id)} danger>删除</Button></div>
            }
        },
    ];
    //获取需要删除项的id
    const tableSelectionChange = (val) => {
        setDeletes(val)
    }
    //批量删除模块
    const dellist = (type, val) => {
        confirm({
            title: '确认永久删除吗',
            icon: <ExclamationCircleOutlined />,
            content: '删除后不可恢复',
            async onOk() {
                val === undefined ? deletes.forEach(a => {
                    Deletethelist(a).then(b => {
                        getsongadmin()
                    })
                }) : await Deletethelist(val)

                notification[type]({
                    message: '删除成功',
                    duration: 1,
                });
                //删除后,刷新列表
                getsongadmin()
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const onSearch = async (value) => {
        var s = JSON.stringify(findlist)
        var d = JSON.parse(s)
        var html = [];
        let arrnew = d.map((item, index) => {
            return Object.assign(
                {},
                {
                    title: item.title,
                    id: item.id,
                    pic: item.pic,
                    introduction: item.introduction,
                }
            );
        });
        var newData = arrnew.filter((item) => {
            if (item.title.indexOf(value) > -1) {
                return item;
            }
            return newData;
        });

        if (newData.length > 0) {
            for (var i = 0; i < newData.length; i++) {
                html.push(newData[i])
            }
        }

        findlist.forEach(a => {
            a.key = a.id
        })

        html.forEach(a => {
            a.key = a.id
        })

        setManageplaylists(html)
    };
    return (
        <div id='song-management'>
            <div className='song-management-title'>
                <Button onClick={() => dellist('success')} danger>批量删除</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                <Search placeholder="搜索歌单" onSearch={onSearch} enterButton />&nbsp;&nbsp;&nbsp;&nbsp;
                <Button onClick={() => Thenewsonglist()}>添加歌单</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                <br />
                <br />
                <br />
            </div>
            <Modal title="添加歌单" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    form={Addthesongs}
                >
                    <Form.Item
                        label="标题"
                        name="title"

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="简介"
                        name="introduction"

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="风格"
                        name="style"

                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
            <Table
                rowSelection={{
                    type: "checkbox",
                    onChange: tableSelectionChange,
                }}
                scroll={{
                    x: 1500,
                    y: 500,
                }}
                bordered
                columns={columns} dataSource={manageplaylists}
            />;

            <Modal title="编辑歌单" open={open} onOk={Ok} onCancel={Cancel}>
                <Form
                    name="basic"
                    form={Editindividualplaylists}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="简介"
                        name="introduction"

                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="风格"
                        name="style"
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>


        </div>
    )
}
